// 用户评论信息
<template>
  <div class="details-rate-info" v-if="!this.CommonUtils.isObjEmpty(rateInfo)">
    <!-- 线条 -->
    <div class="line"></div>
    <!-- 用户评价,更多 -->
    <div class="use-more clear-fix">
      <span class="left">用户评价</span>
      <span class="right">更多</span>
    </div>

    <!-- 线条 -->
    <div class="septal-line"></div>

    <!-- 用户头像和姓名 -->
    <div class="img_name">
      <img :src="rateInfo.list[0].user.avatar" alt />
      <span>{{rateInfo.list[0].user.uname}}</span>
    </div>

    <!-- 评论的内容 -->
    <div class="content">{{rateInfo.list[0].content}}</div>

    <!-- 评论的时间和尺码 -->
    <div class="time_size">
      <span>{{this.DateUtils.formatDate(rateInfo.list[0].created*1000,'yyyy-MM-dd')}}</span>
      <span class="size">{{rateInfo.list[0].style}}</span>
    </div>

    <!-- 评论的图片列表 -->
    <GridView :datas="this.CommonUtils.isEmpty(rateInfo.list[0].images)?[]:rateInfo.list[0].images"></GridView>

  </div>
</template>
<script>
import GridView from "components/common/gridview/GridView.vue";
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
  computed: {},
  components: {
    GridView
  },
  props: {
    rateInfo: {
      type: Object,
      default: {}
    }
  }
};
</script>
<style lang="scss" scoped>
.details-rate-info {
  margin-top: 16px;
  padding-bottom: 10px;
  //线条  
  .line .septal-line {
    height: 4px;
    width: 100%;
    background-color: rgba(100, 100, 100, 0.1);
  }
  .septal-line {
    height: 1px;
  }
  .use-more {
    margin: 8px 8px;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    .right {
      width: 68px;
      text-align: right;
    }
  }

  //用户头像和姓名
  .img_name {
    margin: 0 8px;
    img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      vertical-align: middle;
    }
    span {
      font-size: 12px;
      margin-left: 8px;
      font-weight: bold;
    }
  }

  //评论的内容
  .content {
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 18px;
  }

  .time_size {
    line-height: 22px;
    margin: 0px 8px;
    font-size: 12px;
    .size {
      margin-left: 6px;
    }
  }
}
</style>